<template>
  <div v-if="loading">__SKELETON_HOME_CONTENT__</div>
  <div v-else data-skeleton-root="HOME" data-skeleton-type="list">
    <div class="common-layout">
      <el-container class="container">
        <!-- 侧边栏 -->
        <el-aside width="200px" class="blog_class">
          <p class="blog_select active">贴吧精选专题</p>
          <p class="school_select">高校精选专题</p>
          <span class="title">贴吧分类</span>
          <div class="select_list" v-for="item in barList" key="item._id">
            <div :style="{ fontSize: 14 + 'px' }">
              <svg-icon iconName="icon-Exportservices"></svg-icon>
              <span :style="{ marginLeft: 10 + 'px' }">{{ item.barName }}</span>
            </div>
            <div class="select_item">
              <span>{{ item.description }}</span>
            </div>
          </div>
        </el-aside>
        <el-container>
          <!-- 热门贴吧 -->
          <el-header class="hot_blog">
            <div class="hot_title">
              <div class="hot_blog_left">
                <svg-icon iconName="icon-Exportservices"></svg-icon>
                <span>热门吧</span>
              </div>
              <div class="hot_blog_right">
                <span>{{ currentPage }}/{{ totalPage }}</span>
                <svg-icon iconName="icon-xiangzuo1" @click="back" />
                <svg-icon iconName="icon-xiangyou1" @click="go" />
              </div>
            </div>
            <div class="hot_blog_center">
              <div class="hot_blog_item" @click="gotoInn(item)" v-for="item in barList" key="item._id">
                <img :src="item.barLogo" alt="" />
                <div class="hot_blog_heat">
                  <p data-skeleton-type="ignore">{{ item.barName }}</p>
                  <div>
                    <svg-icon iconName="icon-gerentouxiang_o" />
                    <span>111.4w</span>
                  </div>
                  <div>
                    <svg-icon iconName="icon-shu" />
                    <span>1090.4w</span>
                  </div>
                </div>
              </div>
            </div>
          </el-header>
          <!-- 热门动态 -->
          <el-main class="hot_post">
            <div class="hot_post_title">
              <p>热门动态</p>
              <div class="hot_post_center">
                <p :style="{ color: 'black' }">汽车吧</p>
                <div>
                  <a>【汽车】30万内最速电车之争</a>
                  <span class="discuss">3271</span>
                </div>
                <div class="text">
                  提到新能源汽车，很多人首先想到的就是特斯拉。在Model
                  3国产后，月销量破万的数据似乎更是加强了特斯拉的“神话”。当特斯拉还在主打Model
                  3的时候，国产电动汽车元老——比亚迪再推出汉EV。并且以27万+的超低价格为消...
                </div>
                <div class="img">
                  <img src="	" alt="" />
                </div>
                <div class="author" :style="{ fontSize: 12 + 'px' }">
                  <div>
                    <svg-icon iconName="icon-gerentouxiang_o" />
                    <span style="cursor: pointer">有驾小助手</span>
                  </div>
                  <div>
                    <svg-icon iconName="icon-shijian" />
                    <span>10月03日20:15</span>
                  </div>
                </div>
              </div>
              <div class="hot_post_center">
                <p :style="{ color: 'black' }">汽车吧</p>
                <div>
                  <a>【汽车】30万内最速电车之争</a>
                  <span class="discuss">3271</span>
                </div>
                <div class="text">
                  提到新能源汽车，很多人首先想到的就是特斯拉。在Model
                  3国产后，月销量破万的数据似乎更是加强了特斯拉的“神话”。当特斯拉还在主打Model
                  3的时候，国产电动汽车元老——比亚迪再推出汉EV。并且以27万+的超低价格为消...
                </div>
                <div class="img">
                  <img src="" alt="" />
                </div>
                <div class="author" :style="{ fontSize: 12 + 'px' }">
                  <div>
                    <svg-icon iconName="icon-gerentouxiang_o" />
                    <span style="cursor: pointer">有驾小助手</span>
                  </div>
                  <div>
                    <svg-icon iconName="icon-shijian" />
                    <span>10月03日20:15</span>
                  </div>
                </div>
              </div>
              <div class="hot_post_center">
                <p :style="{ color: 'black' }">汽车吧</p>
                <div>
                  <a>【汽车】30万内最速电车之争</a>
                  <span class="discuss">3271</span>
                </div>
                <div class="text">
                  提到新能源汽车，很多人首先想到的就是特斯拉。在Model
                  3国产后，月销量破万的数据似乎更是加强了特斯拉的“神话”。当特斯拉还在主打Model
                  3的时候，国产电动汽车元老——比亚迪再推出汉EV。并且以27万+的超低价格为消...
                </div>
                <div class="img">
                  <img src="" alt="" />
                </div>
                <div class="author" :style="{ fontSize: 12 + 'px' }">
                  <div>
                    <svg-icon iconName="icon-gerentouxiang_o" />
                    <span style="cursor: pointer">有驾小助手</span>
                  </div>
                  <div>
                    <svg-icon iconName="icon-shijian" />
                    <span>10月03日20:15</span>
                  </div>
                </div>
              </div>
            </div>

            <el-container class="hot_top">
              <!-- 热议榜 -->
              <el-aside width="200px">
                <div class="hot_top_load">
                  <div class="hot_top_title">扫二维码下载贴吧客户端</div>
                  <div class="hot_top_qrcode">
                    下载贴吧APP <br />
                    看高清直播、视频！
                  </div>
                </div>
                <div class="hot_top_pub">
                  <div class="hot_top_title">贴吧热议榜</div>
                  <ul class="hot_top_center">
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                    <li>
                      <span class="top active">1</span>
                      <a herf="javascript;">北京健康宝北京健康宝北京健康宝北京健康宝</a>
                      <span>99999999</span>
                    </li>
                  </ul>
                </div>
                <div class="hot_top_notice">
                  <div class="hot_top_title">公告板</div>
                </div>
              </el-aside>
            </el-container>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "Home",
});
</script>

<script setup lang="ts">
import { useBarStore } from "@/stores/bar";
import { useRouter } from "vue-router";
import _ from "@/utils/local";
import type { typeBarItem } from "@/api/bar";
const loading = ref(true)
setTimeout(() => {
  loading.value = false
}, 1000)

const store = useBarStore();
onMounted(() => {
  //请求所有贴吧列表
  store.getAllBar();
});
const router = useRouter();

const barList = computed(() => {
  return store.BarList;
});
const currentPage = ref(1);
const totalPage = computed(() => {
  return Math.ceil(store.total / 12);
});
const back = () => {
  if (currentPage.value === 1) return;
  store.getAllBar((currentPage.value -= 1));
};
const go = () => {
  if (currentPage.value === totalPage.value) return;
  store.getAllBar((currentPage.value += 1));
};

const gotoInn = (barDetail: typeBarItem) => {
  // 将bar的信息传到Inn
  const barInfo = JSON.stringify(barDetail);
  _.setItem(barInfo, "barInfo");
  router.push(`/Inn?barId=${barDetail._id}`);
};
</script>
<style scoped lang="scss">

.common-layout {
  width: 1000px;
  margin: 0 auto;

  // 主 侧边栏
  .blog_class {
    height: 1300px;
    border: 1px solid #ccc;
    background-color: #f6f7fb;
    padding: 5px;
    font-size: 12px;
    color: #666;

    .blog_select {
      margin-bottom: 10px;
    }

    .school_select {
      margin-bottom: 30px;
    }

    .title {
      color: #000;
      font-weight: bolder;
      display: inline-block;
      margin-bottom: 15px;

      &::after {
        content: "";
        display: inline-block;
        height: 1px;
        width: 100px;
        border-bottom: 1px solid #ccc;
        box-shadow: 0 1px 2px white;
        position: relative;
        top: -5px;
        left: 10px;
      }
    }

    .select_list {
      padding: 5px;
      border-bottom: 1px solid #ccc;
      box-shadow: 0 1px 2px white;

      &.active {
        background-color: #cbbaba;
      }

      .svg-icon {
        font-size: 16px;
      }

      .select_item {
        display: flex;
        flex-wrap: wrap;

        >span {
          margin-right: 5px;
          margin-top: 10px;
          font-weight: normal;
        }
      }
    }

    .active {
      color: #000;
      font-weight: bolder;
    }

    p {
      margin: 0;
      padding: 0;
    }
  }

  // 热门贴吧
  .hot_blog {
    height: 284px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 0 15px 15px 15px;
    padding: 16px 16px 0;
    overflow: hidden;

    .hot_title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;

      .hot_blog_left {
        font-weight: bolder;

        .svg-icon {
          font-size: 20px;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }

    .hot_blog_center {
      display: flex;
      flex-flow: wrap;

      .hot_blog_item {
        width: 180px;
        height: 60px;
        margin-bottom: 16px;
        display: flex;
        cursor: pointer;

        .hot_blog_heat {
          padding-left: 10px;

          .svg-icon {
            vertical-align: middle;
          }

          span {
            color: #666;
            font-size: 12px;
          }
        }

        img {
          width: 62px;
          height: 62px;
          border-radius: 10px;
        }
      }
    }
  }

  //热门动态
  .hot_post {
    padding: 0;
    margin: 15px;
    display: flex;
    justify-content: space-between;

    .hot_post_title {
      width: 550px;
      height: 35px;
      border: 1px solid #ccc;
      background-color: #f8f8f8;
      line-height: 35px;
      color: #0090d7;

      .hot_post_center {
        margin-top: 10px;
        padding-left: 10px;
        color: #666;

        .discuss {
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          color: red;
          display: inline-block;
          width: 40px;
          height: 20px;
          border: 1px solid #ccc;
          position: relative;
          top: -3px;
          left: 20px;
        }

        .text {
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; //至此 多行文本隐藏代码
          font-size: 14px;
          line-height: 20px;
        }

        .img {
          margin-top: 10px;

          img {
            width: 152px;
            height: 107px;
          }
        }

        .author {
          display: flex;

          .svg-icon {
            margin: 0 5px;
            vertical-align: middle;
          }
        }

        a {
          color: #0090d7;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      &>p {
        display: inline-block;
        margin: 0 0 0 20px;
        border-bottom: 2px solid #0090d7;
      }
    }
  }

  .hot_top {
    // float: right;
    margin-left: 10px;

    .hot_top_load {
      .hot_top_title {
        box-sizing: border-box;
        width: 100%;
        height: 35px;
        font-size: 16px;
        text-align: center;
        line-height: 35px;
        border: 1px solid #ccc;
      }

      .hot_top_qrcode {
        margin: 10px 0;
        height: 75px;
        font-size: 12px;
        color: #666;
        line-height: 30px;
        background: url(https://tb2.bdstatic.com/tb/static-spage/widget/app_download/images/icon_9b89237.png) 120px 0 no-repeat;
      }
    }

    .hot_top_pub {
      .hot_top_title {
        box-sizing: border-box;
        width: 100%;
        height: 35px;
        font-size: 16px;
        line-height: 35px;
        border: 1px solid #ccc;
        padding-left: 10px;
      }

      .hot_top_center {
        li {
          font-size: 12px;
          color: #666;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;

          &>a {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; //至此 单行文本隐藏
            flex: 1;
            padding-left: 5px;
          }

          .top {
            display: inline-block;
            width: 15px;
            height: 15px;
            text-align: center;
            background-color: #ff7f42;
          }
        }
      }
    }

    .hot_top_notice {
      margin-top: 15px;

      .hot_top_title {
        box-sizing: border-box;
        width: 100%;
        height: 35px;
        font-size: 16px;
        line-height: 35px;
        border: 1px solid #ccc;
        padding-left: 10px;
      }
    }
  }
}

p {
  margin: 0;
  padding: 0;
}
</style>
